<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <style type="text/css">
      .content {
        padding: 1rem;
        margin-top: 50px;
        font-size: .9rem;
      }

      .content .mui-media-body span:nth-child(2) {
        display: inline-block;
        width: 25%;
        position: relative;
        top: -5px;
      }

      .content .mui-media-body span:nth-child(3) {
        display: inline-block;
        width: 70%;
        position: relative;
        top: -5px;
      }

      .content .mui-media-body img {
        width: 20px;
        height: 20px;
        display: inline-block
      }
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">个人信息</h1>
    </header>
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!--这里放置真实显示的DOM内容-->
        <div class="content">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                <div class="mui-media-body">
                  <img src="../images/shoujihao-2.png" alt="">
                  <span>手机号</span>
                  <span>13200000000</span>
                </div>
              </a>
            </li>
            <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                <div class="mui-media-body">
                  <div class="mui-media-body">
                    <img src="../images/zhifubao.png" alt="">
                    <span>支付宝信息</span>
                    <span>13200000000</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                <div class="mui-media-body">
                  <div class="mui-media-body">
                    <img src="../images/time.png" alt="">
                    <span>注册时间</span>
                    <span>2019-1-3</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                <div class="mui-media-body">
                  <div class="mui-media-body">
                    <img src="../images/xingming-2.png" alt="">
                    <span>姓名</span>
                    <span>张三</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                <div class="mui-media-body">
                  <div class="mui-media-body">
                    <img src="../images/tuijianren.png" alt="">
                    <span>推荐人</span>
                    <span>123456</span>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
  <script src="../js/mui.min.js"></script>
  <script type="text/javascript">
    mui.init()
    mui('.mui-scroll-wrapper').scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    }) // 滚动区域
  </script>
</html>
